import { useState } from 'react'
import { Card, Table, Tag, DatePicker, Select, Input, Button, Space } from 'antd'
import { SearchOutlined, ReloadOutlined, DownloadOutlined } from '@ant-design/icons'
import './index.scss'

const { RangePicker } = DatePicker

const OperationLogs = () => {
  const [loading, setLoading] = useState(false)
  const [searchForm, setSearchForm] = useState({
    username: '',
    module: 'all',
    action: 'all',
    timeRange: null,
  })

  // 模拟日志数据
  const dataSource = [
    {
      id: 1,
      username: 'admin',
      module: '用户管理',
      action: '新增用户',
      description: '新增用户"张三"',
      ip: '192.168.1.100',
      status: '成功',
      createTime: '2024-01-20 10:30:25',
    },
    {
      id: 2,
      username: 'admin',
      module: '内容管理',
      action: '审核笔记',
      description: '通过笔记"《活着》读后感"',
      ip: '192.168.1.100',
      status: '成功',
      createTime: '2024-01-20 10:25:18',
    },
    {
      id: 3,
      username: 'editor',
      module: '图书管理',
      action: '编辑图书',
      description: '编辑图书"三体"信息',
      ip: '192.168.1.105',
      status: '成功',
      createTime: '2024-01-20 10:20:42',
    },
    {
      id: 4,
      username: 'admin',
      module: '系统设置',
      action: '修改配置',
      description: '修改系统配置',
      ip: '192.168.1.100',
      status: '成功',
      createTime: '2024-01-20 10:15:33',
    },
    {
      id: 5,
      username: 'admin',
      module: '用户管理',
      action: '删除用户',
      description: '删除用户"测试账号"',
      ip: '192.168.1.100',
      status: '失败',
      createTime: '2024-01-20 10:10:15',
    },
  ]

  // 搜索
  const handleSearch = () => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    }, 500)
  }

  // 重置
  const handleReset = () => {
    setSearchForm({
      username: '',
      module: 'all',
      action: 'all',
      timeRange: null,
    })
  }

  // 导出
  const handleExport = () => {
    // 导出逻辑
  }

  const columns = [
    {
      title: '操作人',
      dataIndex: 'username',
      key: 'username',
      width: 100,
    },
    {
      title: '模块',
      dataIndex: 'module',
      key: 'module',
      width: 120,
      render: (module) => (
        <Tag color="blue">{module}</Tag>
      ),
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 100,
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      ellipsis: true,
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
      key: 'ip',
      width: 140,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      render: (status) => (
        <Tag color={status === '成功' ? 'success' : 'error'}>
          {status}
        </Tag>
      ),
    },
    {
      title: '操作时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 160,
    },
  ]

  return (
    <div className="operation-logs-container">
      <Card className="search-card" title="查询条件">
        <div className="search-form">
          <div className="form-row">
            <div className="form-item">
              <label>操作人</label>
              <Input
                placeholder="请输入操作人"
                value={searchForm.username}
                onChange={(e) => setSearchForm({ ...searchForm, username: e.target.value })}
              />
            </div>
            <div className="form-item">
              <label>模块</label>
              <Select
                value={searchForm.module}
                onChange={(value) => setSearchForm({ ...searchForm, module: value })}
              >
                <Select.Option value="all">全部</Select.Option>
                <Select.Option value="user">用户管理</Select.Option>
                <Select.Option value="content">内容管理</Select.Option>
                <Select.Option value="book">图书管理</Select.Option>
                <Select.Option value="system">系统设置</Select.Option>
              </Select>
            </div>
            <div className="form-item">
              <label>操作类型</label>
              <Select
                value={searchForm.action}
                onChange={(value) => setSearchForm({ ...searchForm, action: value })}
              >
                <Select.Option value="all">全部</Select.Option>
                <Select.Option value="add">新增</Select.Option>
                <Select.Option value="edit">编辑</Select.Option>
                <Select.Option value="delete">删除</Select.Option>
                <Select.Option value="audit">审核</Select.Option>
              </Select>
            </div>
            <div className="form-item">
              <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
                查询
              </Button>
            </div>
          </div>

          <div className="form-row">
            <div className="form-item">
              <label>操作时间</label>
              <RangePicker
                value={searchForm.timeRange}
                onChange={(dates) => setSearchForm({ ...searchForm, timeRange: dates })}
                placeholder={['开始日期', '结束日期']}
              />
            </div>
            <div className="form-item">
              <Button icon={<ReloadOutlined />} onClick={handleReset}>
                重置
              </Button>
            </div>
            <div className="form-item">
              <Button icon={<DownloadOutlined />} onClick={handleExport}>
                导出日志
              </Button>
            </div>
          </div>
        </div>
      </Card>

      <Card className="table-card">
        <Table
          columns={columns}
          dataSource={dataSource}
          rowKey="id"
          loading={loading}
          pagination={{
            total: dataSource.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
          }}
          scroll={{ x: 1000 }}
        />
      </Card>
    </div>
  )
}

export default OperationLogs
